閱讀時間: 10分鐘

在過去的幾日都分別講了模型(Model)和控制器(Controller)，今天就跟大家講講Spring Boot中的視圖(View)是怎樣。視圖(View)是在客戶端的瀏覽器以網頁形式展示出來，而要將資料展示出來就需要不同的靜態資源。

為了詳細解釋，請大家打開Eclipse，然後再點開之前創建的項目。

剛才提到的靜態資源就是放左src/main/resources的目錄底下。
如上圖所示紅框內的位置。

為了將資料展示出來，Spring Boot 就要使用模板引擎來做出視圖(View)。
在Java的MVC框架中，最為大家熟悉的可能是JSP，其實除了JSP，還有其他同類。

模板引擎

-FreeMarker
-Groovy
-Thymeleaf(在Spring4.0中，Spring Boot官方推荐)
-Velocity
-Mustache
-JSP

Thymeleaf 可以取代JSP

以下是官方的問答:

Can Thymeleaf be used as a complete substitute for JSP and JSTL?
究竟Thymeleaf能否完全取代JSP and JSTL?
Absolutely. Not only it can, but we strongly encourage you to do so.
絕對可以，而且我們強烈鼓勵你使用。

所以我們用Thymeleaf就可以，而且它可以支援不同類別的模板
包括以下:
-HTML (HTML5, XHTML 1.0/1.1, HTML 4)
-XML
-TEXT (plain text)
-JAVASCRIPT (.js files)
-CSS (.css files)

怎樣使用Thymeleaf模板?

第1步: 安裝Maven/Gradle

如果Eclipse沒有安裝Maven/Gradle 可以去Eclipse Marketplace

點一下Eclipse Marketplace，進入以下畫面。

在”Find”右邊的空位輸入Maven，再按一下右邊的小小放大鏡去搜尋。
見到Maven(Java EE) Integration for Eclipse WTP，再按一下Install就可以。
如果順利安裝完成就會可能Install變成installed。

第2步: 需要修改spring-project-2026的目錄底下的pom.xml

點開pom.xml就會看到以下代碼(如果是有所分別的話，不用擔心，可以修改成最終版本)

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.8.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>spring-project-2026</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<name>spring-project-2026</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

只要在<dependencies> </dependencies>內加入以下代碼就可以

<!-- Template Engine -->
		<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot-starter-thymeleaf</artifactId>
    	</dependency>

以下是完整pom.xml的代碼

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.8.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>spring-project-2026</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<name>spring-project-2026</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		
		<!-- Template Engine -->
		<dependency>
      		<groupId>org.springframework.boot</groupId>
      		<artifactId>spring-boot-starter-thymeleaf</artifactId>
    	</dependency>
    	
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

Thymeleaf的基本配置就已經完成了
如果大家有遇到什麼問題，歡迎在下面留言發問。

參考文章/網站/書本:
-Thymeleaf